import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './index.module.css';

const features = [
    {
        title:'Easy to Use',
        imageUrl: 'img/undraw_just_browsing.svg',
        description: ' AWE framework is designed from the ground up to be easily installed and used to build your website up and running quickly.'
    },
    {
        title: ' Modern UI',
        imageUrl: 'img/undraw_responsive.svg',
        description: 'All AWE web components let you design modern and responsive user interfaces using a declarative API.Works with AngularJS and ReactJS.'
    },
    {
        title: 'Pluggable and Extensible',
        imageUrl: 'img/undraw_switches.svg',
        description: 'Extend or customize all AWE features. The Spring Boot {starters} design lets you to enable the modules and features that you need.'
    },
    {
        title: 'Connect your information',
        imageUrl: 'img/undraw_online_connection.svg',
        description:'Bind your data to web forms easily. AWE allows to connect to different data sources like SQL and NoSQL databases, Rest APIs, JavaBeans, etc.',
    },
    {
        title: 'Easy to customize',
        imageUrl: 'img/undraw_add_color.svg',
        description: 'AWE has multiple preconfigured themes and multi-language support. You can add custom CSS according to your needs.'
    },
    {
        title: 'Powered by Spring Boot with AngularJS',
        imageUrl: 'img/undraw_code_review.svg',
        description: 'Uses Spring 5 and Spring Boot 2. @Autowired is available for AWE components and layouts.'
    },
];

function Feature({imageUrl, title, description}) {
    const imgUrl = useBaseUrl(imageUrl);
    return (
        <div className={clsx('col col--4', styles.feature)}>
            {imgUrl && (
                <div className="text--center">
                    <img className={styles.featureImage} src={imgUrl} alt={title}/>
                </div>
            )}
            <h3>{title}</h3>
            <p>{description}</p>
        </div>
    );
}

function Home() {
    const context = useDocusaurusContext();
    const {siteConfig: {customFields = {}, tagline} = {}} = context;
    return (
        <Layout title={tagline} description={customFields.description}>
            <div className={styles.hero}>
                <div className={styles.heroInner}>
                    <h1 className={styles.heroProjectTagline}>
                        <img
                            alt="java logo"
                            className={styles.heroLogo}
                            src={useBaseUrl('img/java.svg')}
                        />
                        <span className={styles.heroTitleTextHtml}>
                {`欢迎来到<b>自学java网</b>，希望你能在本站收获到您想要的知识`}
            </span>
                    </h1>
                    <div className={styles.indexCtas}>
                        <Link className={styles.indexTryMeButton} to={useBaseUrl('docs/intro')}>
                            Start
                        </Link>
                       {/* <Link className={styles.indexCtasGetStartedButton} to={useBaseUrl('docs/intro')}>
                            <Translate>Start</Translate>
                        </Link>
                        <Link className={clsx('margin-left--md', styles.indexTryMeButton)} to="http://demo.aweframework.com">
                            <Translate>Try a Demo</Translate>
                        </Link>*/}
                    </div>
                </div>
            </div>
          {/*  <div className={clsx(styles.announcement, styles.announcementDark)}>
                <div className={styles.announcementInner}>
                    <Translate
                        values={{
                            migrationGuideLink: (
                                <Link to="/docs/guides/v4-migration">
                                    <Translate>v3 to v4 migration guide</Translate>
                                </Link>
                            ),
                        }}>
                        {`Coming from v3? Check out our {migrationGuideLink}`}
                    </Translate>
                    .
                </div>
            </div>*/}
            <main>
                {features && features.length > 0 && (
                    <section className={styles.features}>
                        <div className="container">
                            <div className="row">
                                {features.map((props, idx) => (
                                    <Feature key={idx} {...props} />
                                ))}
                            </div>
                        </div>
                    </section>
                )}
            </main>
        </Layout>
    );
}

export default Home;

